<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header-section">
			<uni-icons type="back" size="30" @click="goBack"></uni-icons>
			<view class="title">商店详情</view>
			<!-- <uni-icons type="search" size="30" @click="goSearch"></uni-icons> -->
		</view>

		<!-- 商店图片轮播 -->
		<view class="">
			<swiper autoplay interval="1800" circular class="swiper-container">
				<swiper-item v-for="(imageUrl, index) in images" :key="index">
					<img :src="baseUrl + imageUrl" class="shop-image" mode="scaleToFill" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息 -->
		<view class="shop-info">
			<text class="shop-name">{{ shop.storeName }}</text>
			<view class="shop-price-stock">
				<text class="shop-price">电话：{{ shop.storePhone }}</text>
			</view>
			<text class="shop-description">营业时间：{{ shop.storeOpen }} - {{ shop.storeClose }}</text>
			<text class="shop-type">地址：{{ shop.storeAddress }}</text>
			<text class="store-id">评分：{{ shop.storeRating }}</text>
		</view>

		<button @click="searchProduct()">查看宝贝</button>
	</view>
</template>

<script>
	import {
		getShopById,
		getShopImagesById
	} from '../../api/shop';
	import config from '@/config';
	const baseUrl = config.baseUrl;

	export default {
		data() {
			return {
				baseUrl: '',
				shop: {},
				shopImages: [],
				images: [],
				shopId:'',
			};
		},
		onLoad(options) {
			const storeId = options.storeId;
			this.shopId = storeId;
			if (storeId) {
				this.fetchshopDetail(storeId);
				this.fetchshopImages(storeId);
			}
			this.baseUrl = baseUrl;
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			fetchshopDetail(storeId) {
				getShopById(storeId).then(response => {
					if (response.code === 200) {
						this.shop = response.data;

					} else {
						console.error(response.message);
					}
				}).catch(error => {
					console.error(error);
				});
			},
			fetchshopImages(storeId) {
				getShopImagesById(storeId).then(response => {
					if (response.code === 200) {

						// 确保 response.data 是一个数组，并且每个元素有一个 imageUrl 属性
						this.shopImages = response.data.map(item => ({
							imageUrl: item.imageUrl
						}));

						this.images = this.shopImages.map(item => item.imageUrl);

					} else {
						console.error(response.message);
					}
				}).catch(error => {
					console.error(error);
				});
			},
			searchProduct() {
				uni.navigateTo({
				    url: `/pages/category/CategoryProduct?storeId=${this.shopId}`,
				  });
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		padding-bottom: 60px;
	}

	.header-section {
		display: flex;
		align-items: center;
		padding: 10px;
		background-color: #ffffff;
		position: fixed;
		top: 0;
		width: 100%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 10;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.swiper-container {
		width: 100%;
		height: 400px;
		margin-top: 20px;
	}

	.shop-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.shop-info {
		margin-top: 10px;
		padding: 15px;
		background-color: #ffffff;
	}

	.shop-name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.shop-price-stock {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.shop-price {
		font-size: 18px;
		color: #ff4d4f;
	}

	.shop-description,
	.shop-type,
	.store-id {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
		display: block;
	}

	.comments-section {
		margin-top: 20px;
		padding: 15px;
		background-color: #ffffff;
	}

	.comments-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.comment-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 15px;
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 10px;
	}

	.comment-content {
		flex: 1;
	}

	.comment-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
	}

	.comment-username {
		font-size: 16px;
		font-weight: bold;
	}

	.comment-rating {
		display: flex;
	}

	.comment-rating uni-icons {
		margin-right: 3px;
	}

	.comment-text {
		font-size: 14px;
	}
</style>